import styled from "./index.module.less";
import { useNavigate } from "react-router-dom";
import {
  Button,
  Icon,
  Pagination,
  Grid,
  CalloutCard,
  LegacyCard,
  Link,
  TextField,
  OptionList,
  Popover,
  ActionList,
  ButtonGroup,
  Badge,
  Thumbnail,
  Tooltip,
} from "@shopify/polaris";
import {
  MobileBackArrowMajor,
  EditMajor,
  ClipboardMinor,
  ChevronLeftMinor,
  ChevronRightMinor,
} from "@shopify/polaris-icons";

import { useState, useCallback } from "react";
import Fasongzhanghuyaoqing from "./component/fasongzhanghuyaoqing";
import Qingqiukehushuju from "./component/qingqiukehushuju";
import Shanchugerenshuju from "./component/shanchugerenshuju";
import Shanchukehu from "./component/shanchukehu";
import BQSRzujian from "./component/biaoqingshuru";
const App = () => {
  const navigator = useNavigate();

  //icon
  const iconContent = () => {
    return (
      <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <circle cx="10" cy="10" r="4" />
      </svg>
    );
  };

  const [value, setValue] = useState("");

  const handleChange = useCallback(
    (newValue: string) => setValue(newValue),
    []
  );

  //OptionList
  const [active, setActive] = useState(false);

  const toggleActive = useCallback(() => setActive((active) => !active), []);

  const activator = (
    <div>
      <Button disclosure onClick={toggleActive} size="slim">
        其他操作
      </Button>
    </div>
  );

  //Fasongzhanghuyaoqing
  const [showModalXQ, setShowModalXQ] = useState(false);
  //Qingqiukehushuju
  const [showModalQQKHSJ, setShowModalQQKHSJ] = useState(false);
  //Shanchugerenshuju
  const [showModalGRSJ, setShowModalGRSJ] = useState(false);
  //Shanchukehu
  const [showModalKH, setShowModalKH] = useState(false);

  return (
    <div className={styled.box}>
      <div className={styled.XQYM}>
        <div className={styled.RSPAD}>
          <div className={styled.headers}>
            <div className={styled.top}>
              <div
                className={styled.BKFH}
                onClick={() => {
                  navigator("/customers");
                }}
              >
                <Icon source={MobileBackArrowMajor}></Icon>
              </div>
              <div className={styled.XKH}>Cook</div>
            </div>
            <div className={styled.topone}>
              <Popover
                active={active}
                activator={activator}
                autofocusTarget="first-node"
                onClose={toggleActive}
              >
                <ActionList
                  actionRole="menuitem"
                  items={[
                    {
                      content: "发送账户邀请",
                      onAction: () => {
                        setShowModalXQ(true);
                      },
                    },
                    {
                      content: "合并客户",
                      onAction: () => {
                        navigator(`/customers/${5669544886335}/merge`);
                      },
                    },
                    {
                      content: "请求客户数据",
                      onAction: () => {
                        setShowModalQQKHSJ(true);
                      },
                    },
                    {
                      content: "删除个人数据",
                      onAction: () => {
                        setShowModalGRSJ(true);
                      },
                    },
                    {
                      suffix: (
                        <div
                          style={{
                            color: "red",
                            display: "flex",
                            marginLeft: "-85px",
                          }}
                        >
                          删除客户
                        </div>
                      ),
                      onAction: () => {
                        setShowModalKH(true);
                      },
                    },
                    {
                      content: "应用",
                      disabled: true,
                      onAction: () => {},
                    },
                  ]}
                />
              </Popover>
              <div
                style={{
                  // color: "white",
                  // backgroundColor: "white",
                  // width: "75px",
                  marginLeft: "15px",
                }}
              >
                <ButtonGroup segmented>
                  <Button size="slim" icon={ChevronLeftMinor}></Button>
                  <Button size="slim" icon={ChevronRightMinor}></Button>
                </ButtonGroup>
              </div>
            </div>
          </div>
          <div className={styled.Ricetitle}>伯利兹南京 • 超过 1 年的客户</div>
        </div>
        <Grid>
          <Grid.Cell columnSpan={{ xs: 6, sm: 6, md: 6, lg: 12, xl: 8 }}>
            {/* <CalloutCard
              title="创建的上一笔订单"
              illustration="https://cdn.shopify.com/s/assets/admin/checkout/settings-customizecart-705f57c725ac05be5a34ec20c05b94298cb8afd10aac7bd9c7ad02030f48cfa0.svg"
              primaryAction={{
                content: "创建订单",
                url: "#",
              }}
            >
              <p>此客户尚未下过任何订单</p>
            </CalloutCard> */}
            <LegacyCard sectioned>
              <div className={styled.DVBKWQS}>
                <div className={styled.USIHNDLA}>
                  <div className={styled.HNJDSW}>消费金额</div>
                  <div className={styled.DHUOSA}>￥0.00</div>
                </div>
                <div className={styled.SONVDKW}>
                  <div className={styled.HNJDSW}>订单</div>
                  <div className={styled.DHUOSA}>1</div>
                </div>
              </div>
            </LegacyCard>
            <LegacyCard sectioned>
              <div className={styled.YBJASW}>创建的上一笔订单</div>
              <div className={styled.SDVWSS}>
                <div className={styled.ABCISWD}>
                  <div className={styled.JISBEIS}>
                    <div className={styled.ANOLWS}>#1001</div>
                    <div className={styled.IHWNLC}>
                      <Badge progress="complete">已付款</Badge>
                    </div>
                    <div>
                      <Badge progress="complete">已发货</Badge>
                    </div>
                  </div>
                  <div>￥0.00</div>
                </div>
                <div className={styled.JKASDWS}>
                  <div>
                    2022年1月6日 <span>9:54</span> 来自 草稿订单
                  </div>
                </div>
                <div className={styled.ADNJKLW}>
                  <div className={styled.JKNALW}>
                    <div>
                      <Thumbnail
                        source="https://burst.shopifycdn.com/photos/black-leather-choker-necklace_373x@2x.jpg"
                        size="small"
                        alt="Black choker necklace"
                      />
                    </div>
                    <div className={styled.ABWLKASD}>啊啊</div>
                  </div>
                  <div className={styled.AHONWJL}>
                    <div>x 1</div>
                    <div className={styled.BOWNLA}>￥0.00</div>
                  </div>
                </div>
              </div>
              <div className={styled.BAJKWD}>
                <div>
                  <Button
                    size="slim"
                    onClick={() => {
                      navigator("/order");
                    }}
                  >
                    查看所有订单
                  </Button>
                </div>
                <div className={styled.WEDFVDG}>
                  <Button
                    size="slim"
                    primary
                    onClick={() => {
                      navigator("/order/create");
                    }}
                  >
                    创建订单
                  </Button>
                </div>
              </div>
            </LegacyCard>
            <div className={styled.SJX}>时间线</div>
            <LegacyCard title="" sectioned>
              {/* <div className={styled.RiceTOP}></div>
              <div className={styled.RiceFOOTER}></div> */}
              <BQSRzujian />
            </LegacyCard>
            <div className={styled.ALEND}>只有您和其他员工可以查看评论</div>
            <div className={styled.XRIGHT}>
              <div className={styled.START}>2022年3月7日</div>
              <div className={styled.footer}>
                <div>已创建客户</div>
                <div className={styled.time}>11:50</div>
              </div>
              <div className={styled.POSITION}>
                <div>
                  <Icon source={iconContent} />
                </div>
              </div>
              <div className={styled.ZZ}></div>
            </div>
          </Grid.Cell>
          <Grid.Cell columnSpan={{ xs: 6, sm: 6, md: 6, lg: 12, xl: 4 }}>
            <LegacyCard title="" sectioned>
              <div className={styled.GDtitle}>
                <div className={styled.gdTITLE}>客户</div>
                <div className={styled.ICONBtn}>
                  <Icon source={EditMajor} color="subdued"></Icon>
                </div>
              </div>
              <div className={styled.GDtitle}>
                <div className={styled.gdTITLE}>联系信息</div>
              </div>
              <div className={styled.EDIT}>
                <div>
                  <Button plain>erio.designsadas@gmail.com</Button>
                </div>
                <Tooltip content="">
                  <div className={styled.ICONBtn}>
                    <Icon source={ClipboardMinor} color="subdued"></Icon>
                  </div>
                </Tooltip>
              </div>
              <div className={styled.SSSL}>将收到以 英语 显示的通知</div>
              <div className={styled.MRSHDZ}>
                <div className={styled.gdTITLE} style={{ marginBottom: "5px" }}>
                  默认收货地址
                </div>
                <div className={styled.xiaotitle}>Cook</div>
                <div>南京市秦淮区科巷一号</div>
                <div>南京</div>
                <div>伯利兹</div>
              </div>
              <div className={styled.MRSHDZ}>
                <div className={styled.gdTITLE} style={{ marginBottom: "5px" }}>
                  营销
                </div>
                <div className={styled.xiaotitle}>
                  {
                    [
                      <div className={styled.FLEX}>
                        <div>
                          <Icon source={iconContent} />
                        </div>
                        <div>未订阅电子邮件</div>
                      </div>,
                      <div className={styled.FLEX}>
                        <div>
                          <Icon source={iconContent} color="primary" />
                        </div>
                        <div>已订阅电子邮件</div>
                      </div>,
                    ][1]
                  }
                </div>
                {
                  [
                    <div className={styled.FLEX}>
                      <div>
                        <Icon source={iconContent} />
                      </div>
                      <div>未订阅短信</div>
                    </div>,
                    <div className={styled.FLEX}>
                      <div>
                        <Icon source={iconContent} color="primary" />
                      </div>
                      <div>已订阅短信</div>
                    </div>,
                  ][0]
                }
              </div>
              <div className={styled.MRSHDZ1}>
                <div className={styled.gdTITLE} style={{ marginBottom: "5px" }}>
                  免税项
                </div>
                <div className={styled.xiaotitle}>无免税项</div>
              </div>
            </LegacyCard>
            <LegacyCard title="" sectioned>
              <div className={styled.FLJU}>
                <div className={styled.gdTITLE}>标签</div>
                <div className={styled.ICONBtn}>
                  <Icon source={EditMajor} color="subdued"></Icon>
                </div>
              </div>
              <div className={styled.mgin}>
                <TextField
                  label=""
                  value={value}
                  onChange={handleChange}
                  autoComplete="off"
                />
              </div>
            </LegacyCard>
            <LegacyCard title="" sectioned>
              <div className={styled.FLJU}>
                <div className={styled.gdTITLE}>备注</div>
                <div className={styled.ICONBtn}>
                  <Icon source={EditMajor} color="subdued"></Icon>
                </div>
              </div>
              <div className={styled.mgin}>此用户没有备注</div>
            </LegacyCard>
          </Grid.Cell>
        </Grid>
      </div>
      {/* 组件 */}
      {showModalXQ && (
        <Fasongzhanghuyaoqing active={showModalXQ} setActive={setShowModalXQ} />
      )}
      {showModalQQKHSJ && (
        <Qingqiukehushuju
          active={showModalQQKHSJ}
          setActive={setShowModalQQKHSJ}
        />
      )}
      {showModalGRSJ && (
        <Shanchugerenshuju
          active={showModalGRSJ}
          setActive={setShowModalGRSJ}
        />
      )}
      {showModalKH && (
        <Shanchukehu active={showModalKH} setActive={setShowModalKH} />
      )}
      {/* 组件 */}
    </div>
  );
};

export default App;
